//从地址栏中截取商品id
var arr = location.search.match(/id=(\d+)/)
var goodsid = arr[1]
//发送ajax从列表中找出商品并渲染详情页面
promiseAjax({
    url: '/api/getMoreNewItem',
    method: 'post',
}).then(res => {
    res = JSON.parse(res)
    console.log(res);
    if (res.code == 200) {
        var newItems = res.data.newItems;
        console.log(newItems);
        var item = newItems.find(item => { return item.id == goodsid })
        console.log(item);
         var brr = [item.listPicUrl, item.primaryPicUrl]
        $('.small>img').first().attr('src', brr[0])
        $('.small>img').first().next().attr('src', brr[1])
        $('.middle>img').first().attr('src', brr[0])
        $('.big>img').first().attr('src', brr[0])  
        $('.detailP1').text(item.name)
        $('.detailP2').text(item.simpleDesc)
        $('.price').text(item.retailPrice)
        
    }
})


/* 放大镜 */
function Enlarge() {
    // 获取所有需要操作的元素
    this.middleBox = document.querySelector('.enlarge .middle');
    this.middleImg = document.querySelector('.enlarge .middle>img');
    this.mask = document.querySelector('.enlarge .middle .mask');
    this.bigBox = document.querySelector('.enlarge .middle .big');
    this.bigImg = document.querySelector('.enlarge .middle .big>img');
    this.smallImgs = document.querySelectorAll('.enlarge .small img');
}
// 在方法中绑定事件
Enlarge.prototype.event = function () {
    // 给小图绑定点击事件
    for (let i = 0; i < this.smallImgs.length; i++) {
        this.smallImgs[i].onclick = () => {
            // 将所有小图的红色边框去掉
            for (var j = 0; j < this.smallImgs.length; j++) {
                this.smallImgs[j].className = '';
            }
            // 给当前点击的小图添加红色边框
            this.smallImgs[i].className = 'active';
            // 获取当前小图的路径
            var path = this.smallImgs[i].getAttribute('src')
            console.log(path);
            // 将图片路径设置给中图和大图
            this.middleImg.setAttribute('src', path)
            this.bigImg.setAttribute('src', path)
        }
    }
    // 移入移出让遮罩和大盒子显示隐藏
    this.middleBox.onmouseover = () => {
        this.mask.style.display = this.bigBox.style.display = 'block'
        // 鼠标移动事件 - 让遮罩跟着走
        this.middleBox.onmousemove = () => {
            // 获取鼠标位置
            var e = window.event;
            var x = e.pageX;
            var y = e.pageY;
            //console.log(this.middleBox.offsetLeft);
            // 计算遮罩left和top
            var l = x - this.mask.offsetWidth / 2 - this.middleBox.offsetLeft - 1;
            var t = y - this.mask.offsetHeight / 2 - this.middleBox.offsetTop - 1;
            if (l < 0) l = 0
            if (t < 0) t = 0
            if (l > this.middleBox.clientWidth - this.mask.offsetWidth) {
                l = this.middleBox.clientWidth - this.mask.offsetWidth
            }
            if (t > this.middleBox.clientHeight - this.mask.offsetHeight) {
                t = this.middleBox.clientHeight - this.mask.offsetHeight
            }
            // 设置遮罩的left和top
            this.mask.style.left = l + 'px'
            this.mask.style.top = t + 'px'

            /*
            大图移动比例 = 遮罩在中盒子上移动的比例
            大图移动的距离 = 大图的大小 * 比例
            大图移动的距离 = 遮罩移动的距离/中盒子的大小*大图的大小
            */

            var xpercent = l / this.middleBox.clientWidth;
            var ypercent = t / this.middleBox.clientHeight;

            var bigX = this.bigImg.offsetWidth * xpercent
            var bigY = this.bigImg.offsetHeight * ypercent;

            this.bigImg.style.left = -bigX + 'px'
            this.bigImg.style.top = -bigY + 'px'
        }
    }
    this.middleBox.onmouseout = () => {
        this.mask.style.display = this.bigBox.style.display = 'none'
    }
}
var e = new Enlarge()
e.event()

/* 返回列表页 */
$('.detailD2P1').on('click', function () {
    location.href = '../xinpin.html'
})
/* 发送ajax获取like列表 */
promiseAjax({
    url: '/api/likeItem',
    method: 'get',
    data: {
        timestamp: 1635323830519,
        itemId: 4030242
    }
}).then(res => {
    res = JSON.parse(res)
    console.log(res);
    if (res.code == 200) {
        var items = res.data.items;
        console.log(items);
        for (var i = 0; i < items.length; i++) {
            //发送ajax获取新品首发商品
            var div = $('<div class="likeShow" detail-id="' + items[i].id + '"></div>')
            var img = $('<img src="" alt="">')
            img.attr('src', items[i].listPicUrl)
            var h4 = $('<h4 class="likeTitle"></h4>')
            h4.text(items[i].name)
            var p = $('<p></p>')
            var span1 = $('<span>￥</span>')
            var span2 = $('<span class="retailPrice"></span>')
            span2.text(items[i].retailPrice)
            /* var span3 = $('<span>￥</span>')
            var span4 = $('<span class="counterPrice"></span>')
            span4.text(items[i].counterPrice) */
            div.append(img)
            div.append(h4)
            div.append(p)
            p.append(span1)
            p.append(span2)
            /* p.append(span3)
            p.append(span4) */
            $('.likeConCen').append(div)
        }
        //左右按钮
        $('.likeRight').on('click', function () {
            $('.likeConCen').css('left', -$('.likeContent').width())
        })
        $('.likeLeft').on('click', function () {
            $('.likeConCen').css('left', 0)
        })
    }
})

/* 24小时热销榜 */
promiseAjax({
    url: '/api/hotsellItem',
    method: 'post',
    data: {
        categoryId: 1005000,
        itemId: 4030242
    }
}).then(res => {
    res = JSON.parse(res)
    console.log(res);
    if (res.code == 200) {
        var data = res.data;
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            //发送ajax获取新品首发商品
            var div = $('<div class="hotS"></div>')
            var img = $('<img src="" alt="">')
            img.attr('src', data[i].listPicUrl)
            var h4 = $('<h4 class="hotTitle"></h4>')
            h4.text(data[i].name)
            var p = $('<p></p>')
            var span1 = $('<span>￥</span>')
            var span2 = $('<span class="retailPrice"></span>')
            span2.text(data[i].retailPrice)
            var span3 = $('<span>￥</span>')
            var span4 = $('<span class="counterPrice"></span>')
            span4.text(data[i].counterPrice)
            div.append(img)
            div.append(h4)
            div.append(p)
            p.append(span1)
            p.append(span2)
            p.append(span3)
            p.append(span4)
            $('.hotShow').append(div)
        }
    }
})

/* 加入购物车 */
$('.detailD2P2').on('click', function () {
    let cartGoodsid = goodsid
    let name = window.localStorage.getItem('name')
    console.log(name);
    if (!name) {
        layer.msg('请先登录', {
            icon: 2,
            time: 1000
        }, () => {
            window.localStorage.setItem('url', location.href)
            location.href = '../login.html'
        })
        return false
    }
    console.log(name);
    var data = window.localStorage.getItem('data')
    if (data) {
        //有数据
        data = JSON.parse(data)
        var obj = data.find(item => {
            return item.cartGoodsid === goodsid && item.name === name
        })
        if (obj) {
            //找到了，购物车里此商品数量+1
            obj.number = obj.number - 0 + 1
            window.localStorage.setItem('data', JSON.stringify(data))
        } else {
            //没找到存入
            data.push({
                cartGoodsid: cartGoodsid,
                number: 1,
                name: name
            })
            window.localStorage.setItem('data', JSON.stringify(data))
            var data = window.localStorage.getItem('data')
            if (data) {
                //有数据
                data = JSON.parse(data)
                var arr = []
                data.forEach(item => {
                    if (item.name === name) {
                        arr.push(item)
                    }
                })
                console.log(arr);
                $('.cartNum').text(arr.length)
            } else {
                $('.cartNum').text('0')
            }
        }
    } else {
        //没有数据
        var arr = [{
            cartGoodsid: cartGoodsid,
            number: 1,
            name: name
        }]
        window.localStorage.setItem('data', JSON.stringify(arr))
    }
    layer.msg('加入购物车成功', {
        icon: 1,
        time: 1000
    })
})
//结算购物车
$('.detailD2P5').on('click', function () {
    location.href = '../cart.html'
})
